import React, { useState } from 'react';
import { Card, Button, Input } from '@weubi/ui';

const SettingsPage: React.FC = () => {
  const [settings, setSettings] = useState({
    general: {
      siteName: 'Weubi 爬虫系统',
      maxConcurrentTasks: 5,
      defaultTimeout: 30000,
      defaultRetries: 3
    },
    database: {
      host: 'localhost',
      port: 5433,
      database: 'weubi_crawler',
      username: 'crawler'
    },
    notifications: {
      emailEnabled: true,
      webhookEnabled: false,
      emailAddress: 'admin@weubi.com',
      webhookUrl: ''
    }
  });

  const handleSave = () => {
    // 模拟保存设置
    console.log('保存设置:', settings);
  };

  const handleInputChange = (section: string, field: string, value: any) => {
    setSettings(prev => ({
      ...prev,
      [section]: {
        ...prev[section as keyof typeof prev],
        [field]: value
      }
    }));
  };

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-gray-900">系统设置</h1>

      <div className="grid gap-6">
        <Card title="常规设置" className="p-6">
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                站点名称
              </label>
              <Input
                value={settings.general.siteName}
                onChange={(e) => handleInputChange('general', 'siteName', e.target.value)}
                placeholder="输入站点名称"
              />
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  最大并发任务数
                </label>
                <Input
                  type="number"
                  value={settings.general.maxConcurrentTasks.toString()}
                  onChange={(e) => handleInputChange('general', 'maxConcurrentTasks', parseInt(e.target.value))}
                  placeholder="5"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  默认超时时间 (毫秒)
                </label>
                <Input
                  type="number"
                  value={settings.general.defaultTimeout.toString()}
                  onChange={(e) => handleInputChange('general', 'defaultTimeout', parseInt(e.target.value))}
                  placeholder="30000"
                />
              </div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                默认重试次数
              </label>
              <Input
                type="number"
                value={settings.general.defaultRetries.toString()}
                onChange={(e) => handleInputChange('general', 'defaultRetries', parseInt(e.target.value))}
                placeholder="3"
              />
            </div>
          </div>
        </Card>

        <Card title="数据库设置" className="p-6">
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  主机地址
                </label>
                <Input
                  value={settings.database.host}
                  onChange={(e) => handleInputChange('database', 'host', e.target.value)}
                  placeholder="localhost"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  端口
                </label>
                <Input
                  type="number"
                  value={settings.database.port.toString()}
                  onChange={(e) => handleInputChange('database', 'port', parseInt(e.target.value))}
                  placeholder="5433"
                />
              </div>
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  数据库名
                </label>
                <Input
                  value={settings.database.database}
                  onChange={(e) => handleInputChange('database', 'database', e.target.value)}
                  placeholder="weubi_crawler"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  用户名
                </label>
                <Input
                  value={settings.database.username}
                  onChange={(e) => handleInputChange('database', 'username', e.target.value)}
                  placeholder="crawler"
                />
              </div>
            </div>
          </div>
        </Card>

        <Card title="通知设置" className="p-6">
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="emailEnabled"
                checked={settings.notifications.emailEnabled}
                onChange={(e) => handleInputChange('notifications', 'emailEnabled', e.target.checked)}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label htmlFor="emailEnabled" className="text-sm font-medium text-gray-700">
                启用邮件通知
              </label>
            </div>
            
            {settings.notifications.emailEnabled && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  邮箱地址
                </label>
                <Input
                  type="email"
                  value={settings.notifications.emailAddress}
                  onChange={(e) => handleInputChange('notifications', 'emailAddress', e.target.value)}
                  placeholder="admin@weubi.com"
                />
              </div>
            )}
            
            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="webhookEnabled"
                checked={settings.notifications.webhookEnabled}
                onChange={(e) => handleInputChange('notifications', 'webhookEnabled', e.target.checked)}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label htmlFor="webhookEnabled" className="text-sm font-medium text-gray-700">
                启用 Webhook 通知
              </label>
            </div>
            
            {settings.notifications.webhookEnabled && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Webhook URL
                </label>
                <Input
                  value={settings.notifications.webhookUrl}
                  onChange={(e) => handleInputChange('notifications', 'webhookUrl', e.target.value)}
                  placeholder="https://your-webhook-url.com"
                />
              </div>
            )}
          </div>
        </Card>

        <div className="flex justify-end">
          <Button onClick={handleSave} className="px-8">
            保存设置
          </Button>
        </div>
      </div>
    </div>
  );
};

export default SettingsPage;
